<template>
  <MainSlot v-loading="loading">
    <template v-slot:btn>
      <BtnSlot :btnList="btnList" @handleEvent="getBtnEvent"></BtnSlot>
    </template>
    <template v-slot:table>
      <div class="tableList">
        <div class="tableModle">
          <div class="tableTilte">已选摄像头</div>
          <TableData :openColumn="false" :config="table_config" :tableThead="tableThead" :dataList="dataList_left"
            :loading="loading" @selection-change="selectionChange">
          </TableData>
        </div>
        <div class="line"></div>
        <div class="tableModle">
          <div class="tableTilte">所有摄像头</div>
          <TableData :tableThead="tableThead_2" :isSelect="true" :openColumn="false" :dataList="dataList_right"
            :loading="loading" @selection-change="selectionChange_right">
          </TableData>
        </div>
      </div>
    </template>
    <template v-slot:pagination>
      <div class="tableList">
        <div class="tableModle">
          <Pagination @size-Change="handleSizeChange" @current-change="handleCurrentChange" :size="size_left" :page="page_left" :total="total_left">
          </Pagination>
        </div>
      </div>
    </template>
    <template v-slot:dialogModule>
      <AddEdit :title="'摄像头'" @closeDialog="closeDialog" :dialogVisible="dialogVisible" :addEditFlag="addEditFlag"
        :data="formData">
      </AddEdit>
    </template>
  </MainSlot>
</template>
<script>
import MainSlot from "@/components/MainSlot";
import Pagination from '@/components/Pagination';
import SearchForm from '@/components/SearchForm';
import TableData from '@/components/TableData';
import BtnSlot from '@/components/BtnSlot';
import EnumSlot from '@/components/EnumSlot';
import AddEdit from './components/addEdit.vue';
import cameraMeanagement from '@/api/basicInformation/cameraMeanagement';

import Axios from "axios";
export default {
  components: { MainSlot, Pagination, SearchForm, TableData, BtnSlot, EnumSlot, AddEdit },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      formData: {},
      page: 1,
      selectIndex: 0,
      selectionList: [],
      addEditFlag: 'add',
      btnList: ['add', 'delete'],
      dataList: [],
      tableThead: [
        { isShow: true, label: '摄像头名称', prop: 'cameraName' },
        { isShow: true, label: '序列号', prop: 'deviceSerial' },
      ],
      tableThead_2: [
        { isShow: true, label: '摄像头名称', prop: 'cameraName' },
        { isShow: true, label: '序列号', prop: 'deviceSerial' },
        { isShow: true, label: '验证码', prop: 'verificationCode' }
      ],
      // 配置项
      table_config: {
        isCheckBox: true,
        isOperation: true,
        // 表格操作列
        operation: {
          label: '操作',
          width: '150',
          cols: [
            {
              label: '编辑',
              type: 'primary',
              flag: 'edit',
              handleRow: this.handleRow
            },
            {
              label: '删除',
              type: 'danger',
              flag: 'delete',
              handleRow: this.handleRow
            }
          ]
        },
      },

      page_left: 1,
      size_left: 10,
      total_left: 10,

      dataList_left: [],
      dataList_right: [],
      selectlist_right: [],
    }
  },
  mounted() {
    this.queryData();
    this.getTableDataListtwo();
  },
  methods: {
    queryData() {
      let params = {
        page: this.page_left,
        size: this.size_left,
        entity: {
          organizationNo: sessionStorage.organizationNo,
          systemNo: "SC"
        }
      }
      cameraMeanagement.ownFarmingTypelist({ ...params }).then(res => {
        if (res.code == 1) {
          this.dataList_left = res.data.content || [];
          this.total_left = res.data.totalElements;
          if (res.data.totalPages && this.page > res.data.totalPages) {
            this.page_left = res.data.totalPages;
            this.queryData();
          }
        } else {
          this.$message.warning(res.msg || '分页查询失败')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getTableDataListtwo() {
      this.dataList_right = [];
      cameraMeanagement.getbaseFarmingTypeList(sessionStorage.organizationNo).then(res => {
        this.dataList_right = res.data.cameraList || [];
      });
    },
    delList(deleteList = [], key = 'cameraNo') {
      let list = []
      deleteList.forEach(item => {
        list.push(item[key])
      })
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await cameraMeanagement.delListFarmingTypelist({ noList: list });
        if (res.code == 1) {
          this.$message.success(res.msg || '删除成功');
          this.queryData();
        } else {
          this.$message.warning(res.msg || '删除失败');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleCurrentChange(page) {
      console.log(page)
      this.page_left = page;
      this.queryData();
    },

    handleSizeChange(size) {
      this.size_left = size;
      this.queryData();
    },
    // 操作方法
    handleRow(rowData, item) {
      if (item.flag == 'delete') {
        this.delList([rowData]);
      } else if (item.flag == 'edit') {
        this.dialogVisible = true;
        this.formData = JSON.parse(JSON.stringify(rowData));
      };
      this.addEditFlag = item.flag;
      console.log(this.addEditFlag)
    },
    selectionChange(val) {
      this.selectionList = val || [];
    },
    selectionChange_right(val) {
      this.selectlist_right = val;
    },
    //获取选中Btn
    getBtnEvent(flag) {
      if (flag == 'add') {
        this.addFarmingTypelist(this.selectlist_right)
      } else if (flag == 'delete') {
        if (this.selectionList.length > 0) {
          this.delList(this.selectionList)
        } else {
          this.$message.warning('请先选择表单数据项后再删除！')
        }
      }
    },
    async addFarmingTypelist(list = []) {
      if (list.length == 0) return;
      list.forEach(item => {
        item.organizationNo = sessionStorage.organizationNo
      })
      let res = await cameraMeanagement.addFarmingTypelist({
        cameraList: list,
        organizationNo: sessionStorage.organizationNo
      }).then(res => {
        this.$message[res.code == 1 ? 'success' : 'warning'](res.code == 1 ? '操作成功' : res.msg || '操作失败');
        this.queryData();
      }).catch(err => {
        console.log(err)
      })
    },
    //关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
      this.queryData();
    },
  }
};
</script>
<style lang="scss" scoped>
.tableList {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .line {
    width: 0;
    height: 100%;
    border-left: 1px solid #e9e9e9;
  }

  .tableModle {
    width: calc(50% - 10px);

    .tableTilte {
      font-size: 14px;
      padding: 10px 0;
      color: #4381b5;
    }
  }
}

.pointer {
  margin-right: 5px;
}

.searchFormModule {
  width: 70%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;

  .w50p {
    margin-right: 10px;
  }
}

.app-container {
  height: calc(100% - 40px);
}

::v-deep .el-table {
  height: calc(100%);
  overflow: auto;
}
</style>